
<template>
    <div v-if="!isFileDetail" class='booklist-container'>
        <el-row class="operate-box">
            <el-col :sm="12">
                <div class="grid-content">
                    <el-button v-if="(pageLayer >= 0)" type="primary" :icon="Document" @click="addFolder">新建账簿</el-button>
                    <el-button v-if="(pageLayer > 0)" type="outline-blue" :icon="CirclePlusFilled" @click="addFile">添加数据集</el-button>
                    <el-button v-if="(pageLayer > 0)" type="outline-blue" :icon="Rank" @click="moveChecked">移动</el-button>
                    <el-button v-if="(pageLayer > 0)" type="outline-blue" :icon="DeleteFilled" @click="delChecked">删除</el-button>
                </div>
            </el-col>
            <el-col :sm="12">
                <div class="grid-content grid-search">
                    <el-input
                        v-model="wd"
                        class="search-input m-2"
                        placeholder="搜索"
                        :prefix-icon="Search"
                    />
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang='ts'>
import { CirclePlusFilled, DeleteFilled, Document, Rank, Search } from '@element-plus/icons-vue';
import { defineProps, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import Bus from "../../utils/bus";
const props = defineProps({
    'pageLayer': {
        'type': Number,
        'required': true,
        'default': 0
    },
    'pageName': {
        'type': String,
        'required': true,
        'default': ''
    },
    'isFileDetail': {
        'type': Boolean,
        'required': false,
        'default': false
    }
})

const wd = ref("")
const addFolderFlag = ref(false)
const addFileFlag = ref(false)

const addFolder = () => {
    if (!addFolderFlag.value) {
        console.log('----add folder------')
        addFolderFlag.value = true
        Bus.emit('add-folder', addFolderFlag.value)
    } else {
        ElMessage({
            message: '您已经新建了一个账簿,请添加完成后再继续.',
            type: 'warning',
        })
    }
}
Bus.on('close-add-folder', (flag: any) =>{
    if (flag) {
        addFolderFlag.value = false
    }
})

const addFile = () => {
    Bus.emit('add-file', true)
    // if (!addFileFlag.value) {
    //     console.log('----add file------')
    //     addFileFlag.value = true
    //     Bus.emit('add-file', addFileFlag.value)
    // } else {
    //     ElMessage({
    //         message: '您已经新建了一个数据集,请添加完成后再继续.',
    //         type: 'warning',
    //     })
    // }
}
// Bus.on('close-add-file', (flag: any) =>{
//     if (flag) {
//         addFileFlag.value = false
//     }
// })

const moveChecked = () => {
    console.log('----move all checked------')
    Bus.emit('move-checked', true)
}

const delChecked = () => {
    console.log('----delete all checked------')
    Bus.emit('delete-checked', true)
}
</script>
<style lang='scss' scoped>
.booklist-container {
    margin-bottom: 15px;
    .operate-box {
        line-height:50px;
        .grid-search {
            float: right;
        }
        .search-input {
            width: 320px;
            .el-input__prefix {
                left: 10px;
            }
        }
    }
}
</style>
<style lang='scss'>
.booklist-container {
    .search-input {
        width: 320px;
        .el-input__prefix {
            left: 10px;
        }
    }
}
</style>